<script setup>
import { ref, reactive } from "vue";
import { onShow, onReady, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast } from "@/utils";
import {
	getCurrentDate,
} from "@/utils/date";
import NavBar from "../../components/NavBar.vue";


const state = reactive({
	navHeight: 0,
	/* 1：日账单 2：月账单 */
	tabIndex: 1,
	tabs: ["日账单", "月账单"],
	thead: ["日期", "笔数", "收入", "成本", "利润", "分润", "操作"],
	pageNum1: 1,
	pageNum2: 1,
	/* 查询参数 */
	params: {
		/* 1：日账单 2：月账单 */
		type: 1,
		/* 页码 */
		pageNum: 1,
		/* 每页显示的条数 */
		pageSize: 10,
		/* 总共多少页数据 */
		pageCount: 1,
		/* 开始时间 */
		startTime: "",
	},
	/* 日账单列表数据 */
	dayList: [],
	/* 月账单列表数据 */
	monthList: [],
	/* 查询开始时间弹窗 */
	showStartDate: false,
	/* 开始时间文本 */
	startDateText: null,
})
let datetimePickerRef = ref(null);

onShow(() => {
	state.startDateText = getCurrentDate();
	/* 获取日/月账单列表数据 */
	getBillList();
})

onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});

const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
  if (type === 'day') {
    return `${value}日`;
  }
  return value;
};

const handleStartDateConfirm = (e) => {
	console.log(e)
	// const item = e.value[0];
	// payStatusName.value = item.text;
	// orderCondition.value.payStatus = item.value;
	// showOrderStatus.value = false;
	// /* 获取订单列表数据 */
	// getOrderList();
}

/* 日/月账单Tab点击事件 */
const handleTabs = (tab) => {
	state.tabIndex = tab;
	if (tab == 1) {
		state.dayList = [];
		state.pageNum1 = 1;
		state.params.type = 1;
	} else {
		state.monthList = [];
		state.pageNum2 = 1;
		state.params.type = 2;
	}
	getBillList(tab);
}


/* 上一页/下一页按钮点击事件 */
const handlePageChange = (operation) => {
	if (operation == "prev") {
		/* 上一页 */
		if (state.params.pageNum == 1) {
			return Toast("已经是首页了!");
		} else {
			state.params.pageNum--;
		}
	} else {
		/* 下一页 */
		if (state.params.pageCount <= state.params.pageNum) {
			return Toast("已经是尾页了!");
		}
		state.params.pageNum++;
	}
	getBillList(state.tabIndex);
}

/* 获取日月统计数据 1：日账单 2：月账单 */
const getBillList = (tabIndex = 1) => {
	request({
		url: `${ApiUrl.getDayMonthStatisticalList}?pageNum=${state.params.pageNum}&pageSize=${state.params.pageSize}`,
		method: "post",
		data: {
			...state.params
		}
	}).then(res => {
		if (res.status == 0) {
			tabIndex === 1 ? state.dayList = res.data.list : state.monthList = res.data.list;
			state.params.pageCount = res.data.pages;
		} else {
			Toast(res.msg, "error");
		}
	})
}
</script>

<template>
  <view class="bill_statistics">
		<NavBar v-model:navHeight="state.navHeight" :hideBack="false">
		  <template v-slot:center>
				<view class="input" @click="state.showStartDate = true">
					<image src="/static/image/navbar/search.png" mode="aspectFill"></image>
					<input placeholder="请选择需要查询的日期" disabled />
				</view>
		  </template>
		</NavBar>
		<view class="bill_content">
			<view class="tabs">
				<view
					class="tabs_item"
					:class="{ 'active': state.tabIndex === index + 1 }"
					v-for="(item, index) in state.tabs"
					:key="index"
					@click="handleTabs(index + 1)">
					{{ item }}
				</view>
			</view>
			<view class="bill_list">
				<view class="bill_thead">
					<view class="thead_item" :class="[`thead${index + 1}`]" v-for="(item, index) in state.thead" :key="index">
						{{ item }}
					</view>
				</view>
				<view class="bill_tbody">
					<template v-if="state.tabIndex == 1 ? state.dayList.length > 0 : state.monthList.length > 0">
						<view class="tbody_item" v-for="(item, index) in state.tabIndex == 1 ? state.dayList : state.monthList" :key="index">
							<text>{{ item.dateStr }}</text>
							<text>{{ item.totalOrders }}</text>
							<text>{{ item.totalTurnover }}</text>
							<text>{{ item.totalCost }}</text>
							<text>{{ item.totalProfit }}</text>
							<text>{{ item.accountProfit }}</text>
							<text>账单明细</text>
						</view>
					</template>
					<view v-else class="no_data">暂无数据</view>
				</view>
			</view>
			<view v-if="state.tabIndex == 1 ? state.dayList.length > 0 : state.monthList.length > 0" class="page_button">
				<view @click="handlePageChange('prev')">上一页</view>
				<view @click="handlePageChange('next')">下一页</view>
			</view>
		</view>
		<!-- 查询开始时间弹窗 -->
		<u-datetime-picker
			ref="datetimePickerRef"
			:show="state.showStartDate"
			v-model="state.startDateText"
			:mode="state.tabIndex === 1 ? 'date' : 'year-month'"
			@cancel="state.showStartDate = false"
			@confirm="handleStartDateConfirm" />
	</view>
</template>

<style lang="scss">
.bill_statistics {
	box-sizing: border-box;
	padding-bottom: 50rpx;
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
			}
		}
	}
	.input {
		position: relative;
		width: 436rpx;
		image {
			position: absolute;
			top: 50%;
			left: 20rpx;
			transform: translateY(-50%);
			width: 30rpx;
			height: 30rpx;
		}
		input {
			box-sizing: border-box;
			padding-left: 40rpx;
		}
	}
	.bill_content {
		padding-top: calc(v-bind('state.navHeight') * 1px + 20rpx);
		.tabs {
			width: 678rpx;
			height: 72rpx;
			margin: 0 auto;
			display: flex;
			.tabs_item {
				width: 50%;
				height: 100%;
				font-size: 28rpx;
				line-height: 33rpx;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active {
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.04);
					border-radius: 12rpx;
					font-weight: 500;
					color: #1A1A1A;
				}
			}
		}
		.bill_list {
			margin-top: 20rpx;
			.bill_thead {
				width: 750rpx;
				height: 64rpx;
				background: #FF766C;
				display: flex;
				box-sizing: border-box;
				padding: 18rpx 0;
				.thead_item {
					font-weight: 500;
					font-size: 20rpx;
					color: #ffffff;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 110rpx;
					&:nth-of-type(2) {
						width: 80rpx;
					}
					&:not(:last-child) {
						border-right: 4rpx solid #FFE5E5;
					}
					&:last-child {
						flex: 1;
					}
				}
			}
			.bill_tbody {
				.tbody_item {
					width: 750rpx;
					min-height: 64rpx;
					background: #FFFFFF;
					font-size: 20rpx;
					color: #3B3D3D;
					box-sizing: border-box;
					padding: 18rpx 0;
					display: flex;
					&:nth-child(odd) {
						background-color: #FFF3F2;
					}
					text {
						width: 110rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						&:nth-of-type(1) {
							box-sizing: border-box;
							padding: 0 4rpx;
						}
						&:nth-of-type(2) {
							width: 80rpx;
						}
						&:last-child {
							flex: 1;
							color: #25DFA5;
							font-weight: 500;
						}
					}
				}
				.no_data {
					width: 750rpx;
					height: 64rpx;
					background: #FFFFFF;
					font-size: 20rpx;
					color: #3B3D3D;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.page_button {
			margin: 60rpx 73rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				width: 282rpx;
				height: 60rpx;
				border-radius: 40rpx;
				border: 2rpx solid #FF776A;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #FF4638;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>